<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link type="text/css" rel="stylesheet" href="top.css">
</head>
<body>

<div id="a">
    <div id="b">
        <p>传入一个值，可以随机生成一串字符串</p>
        <div id="content"></div>
        <input type="number" name="number" id="number" min="1" max="100">
        <button id="length">点击生成</button>
    </div>


</div>


<script>


    document.getElementById('length').onclick = function (){
        //获取数值
        let length = document.getElementById('number').value;
        //获取随机字符串
        let value = '0123456789qwertyuiopasdfghjklzxcvbnm';
        let leng= value.length;
        let charat = '';
        for(let i=0;i<length;i++){
            charat += value.charAt(Math.floor(Math.random()*leng));
        }

        // 连接api接口
        let xmlhttp = new XMLHttpRequest();
        xmlhttp.onreadystatechange = function (){
            if(xmlhttp.readyState == 4 && xmlhttp.status == 200){

                let json = JSON.parse(xmlhttp.responseText);

                document.getElementById('content').innerHTML=json.date.length;
            }
        };

        xmlhttp.open("POST",'/length/length.php',true);
        xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        xmlhttp.send('length='+charat);
    };

</script>
</body>
</html>